<!--
 * @Description: watch
 * @Date: 2022-07-01 10:29:07
 * @LastEditTime: 2023-05-17 11:44:37
 * @FilePath: \vue3\src\views\vue3Study\watchTest.vue
-->
<template>
  <div class="div-column">
    <input v-model="watch1" />
    <input v-model="watch2" />
    <el-input v-model="watch3" @input="inputEvent" @change="changeEvent" />
    <el-input v-model="message.name" />
  </div>
</template>
<script>
import { onBeforeUpdate, onUpdated, ref, watch, computed, reactive, watchEffect } from "vue";
export default {
  setup() {
    //改变Reactive
    let watch1 = ref("");
    let watch2 = ref("");
    let watch3 = ref("");
    watch(
      [watch1, watch2],
      (newValue, oldValue, callbackTest) => {
        console.log("oldValue:" + oldValue + " newValue:" + newValue);
        callbackTest(() => {
          console.log("callbackTest" + " newValue:" + newValue);
        });
      },
      { flush: "pre" }
    );

    let inputEvent = (e) => {
      console.log("inputEvent" + JSON.stringify(e));
    };
    let changeEvent = (e) => {
      console.log("changeEvent" + JSON.stringify(e));
    };
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate watch1:" + watch1.value);
    });
    onUpdated(() => {
      console.log("onUpdated watch1:" + watch1.value);
    });

    /***************************每日一题**************************************** */
    // const message = ref("每日一题");
    // const newMessage = computed(() => {
    //   return message.value;
    // });
    // watch(newMessage, (newValue, oldValue) => {
    //   console.log("新的值:", newValue);
    //   console.log("旧的值:", oldValue);
    // });
    let message = reactive({ name: 'zhangsan' });
    setTimeout(()=>{
      // message = reactive({ name: 'lisi' })
      message.name="lisi"
    },3000)
    watch(() => message.name, (newValue, oldValue) => {
      console.log("新的值:", newValue);
      console.log("旧的值:", oldValue);
    });
    // watchEffect(() => {
    //   console.log("watchEffect新的值:", message.name);
    // })


    // const count = ref(0)
    // setTimeout(() => {
    //   count.value = 1
    // }, 1000)
    // setTimeout(() => {
    //   count.value = 2
    // }, 3000)
    // function getData() {
    //   return new Promise((resolve, reject) => {
    //     resolve(100)
    //   })
    // }
    // const stop = watchEffect(async (onInvalidate) => {
    //   console.log(count.value, '输出数据')
    //   const data = await getData()
    //   console.log(data, '---watchEffect')
    //   onInvalidate(() => {
    //     console.log('---onInvalidate ')
    //   })
    // })

    // setTimeout(() => {
    //   stop()
    // }, 2000)
    return {
      watch1,
      watch2,
      watch3,
      inputEvent,
      changeEvent,
      message,
    };
  },
};
</script>
